<template>
  <div class="tag-wrap aside-item">
    <div class="aside-header">所有标签</div>
    <div class="aside-content">
      <a-empty v-if="!tagList.length" description="没有找到分类哦" />
      <span class="cate-item" v-for="item in tagList" :key="item.id" @click="toPage(item.id)">
        <component :is="item.icon || 'TagsOutlined'" /> {{item.name}}
      </span>
    </div>
  </div>
</template>

<script>
import { computed } from "vue";
import { useRouter } from "vue-router";
import store from "@/store";
export default {
  setup() {
    const router = useRouter();
    const tagList = computed(() => store.state.tagList);
    const toPage = (id) => {
      router.push({ path: `/home`, query: { tag: id } });
    };

    return {
      tagList,
      toPage,
    };
  },
};
</script>

<style scoped lang="less">
.tag-wrap {
  font-size: 1.4rem;
  .cate-item {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 10px 10px 0;
    border-radius: 0.4rem;
    white-space: nowrap;
    color: #fefefe;
    background-color: #ff6a6a;
    transition: all 0.3s;
    &:hover {
      box-shadow: 0 1px 2px 2px rgba(7, 17, 27, 0.2);
      cursor: url("https://cdn.jsdelivr.net/gh/YunYouJun/cdn/css/md-cursors/link.cur"),
        auto !important;
    }
  }
}
</style>
